<template>
	<view class="my-popup">
    <view class="maintain_search" v-if="!type">
      <input class="maintain-inp" confirm-type="search" placeholder="请输入任务名称" v-model="params.keyword" @confirm="searchProject"/>
      <text class="maintain-btn" @click="searchProject">
        <i class="iconfont iconsousuo"></i>
      </text>
    </view>
		<view class="maintain_screen" v-else-if="type">
      <view class="header-top flex">
				<picker class="select" @change="provinceChange" :value="indexProvince" :range="provinceList" range-key="text" placeholder="市">
					<input type="text" class="uni-input status" placeholder="省"  :value="provinceName" :disabled="true"/>
					<text class="popup-close" @click="clear(0)">
						<i class="iconfont iconguanbi2"></i>
					</text>
				</picker>
				<picker class="select" @change="cityChange"   :value="indexCity" :range="cityList" range-key="text">
					<input type="text" class="uni-input status" placeholder="市" :value="cityName" :disabled="true"/>
					<text class="popup-close" @click="clear(1)">
						<i class="iconfont iconguanbi2"></i>
					</text>
				</picker>
				
				<picker class="select" @change="areaChange" :value="indexArea" :range="areaList" range-key="text">
					<input type="text" class="uni-input status" placeholder="区" :value="areaName" :disabled="true"/>
					<text class="popup-close" @click="clear(2)">
						<i class="iconfont iconguanbi2"></i>
					</text>
				</picker>
			</view>
			<view class="header-bottom flex">					
				<picker class="select" @change="periodChange" :value="maintainStatus" :range="statusLabel" range-key="text">
					<input type="text" class="uni-input status" :value="status" :disabled="true"/>
					<text class="popup-close" @click="clear(3)">
						<i class="iconfont iconguanbi2"></i>
					</text>
				</picker>
				<picker class="select" mode="date" :value="planCompleteTime" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input status">{{planCompleteTime}}</view>
					<text class="popup-close" @click="clear(4)">
						<i class="iconfont iconguanbi2"></i>
					</text>
				</picker>
				<view class="reset select flex-center-h fs-13" @click="reset">
					重置
				</view>
			</view>
    </view>
    <view class="maintain-list">
      <scroll-view scroll-y class="buildList" v-if="maintainDatas.length>0">
				<view class="maintain-card" v-for="(item,index) in maintainDatas" :key="index">
					<view class="maintain-card__head" @click="goToSubProjectInfo(item)">
						<view class="title">
							<text>{{ item.taskName }}</text>
						</view>
						<text class="state">{{ item.status==0?'待维护':item.status==1?'进行中':item.status==2?'待审核':item.status==3?'已审核':'暂无状态' }}</text>
					</view>
					<view class="maintain-card__body">
						<view class="maintain_label">所属项目名称：{{ item.projectName || "--" }}</view>
						<view class="maintain_label">计划完成日期：{{ item.planCompleteTime || "--" }}</view>
					</view>
					<view class="maintain-card__foot">
						<view class="maintain_info_btn" @click="gotoPoint(item.projectId)">
							<view class="maintain_btn_bg"></view>定位
						</view>
						<view class="maintain_info_btn" @click="gotoInfo(item.maintainTaskId)">
							<view class="maintain_btn_bg"></view>详情
						</view>
					</view>
				</view>
				<view class="load_more" @click="loadMoreMaintain">加载更多数据</view>
			</scroll-view>
    </view>
	</view>
</template>

<script>
	import { getMaintainList, getDistrict, supervisionList} from '@/common/api/map'
	import { projectInfo } from '@/common/api/api'

	export default {
		name: 'maintainPopup',
		props: ['type'],
		data() {
		  return {
				$viewer:"",
        params:{
          keyword: "",
        },
				taskId: '',
        total: 0,
				maintainDatas: [],
				page: {
					pageNo: 1,
					pageSize: 10,
					status: '',
					district: '',
					planCompleteTime: '',
				},
				totalPage:0,
				status:'状态',
				planCompleteTime: "维护时间",
				resultList:[],//行政区接口返回结果
				provinceList:[],
				cityList:[],
				areaList:[],
				provinceName:'',
				cityName:'',
				areaName:'',
				statusLabel:[{
					value: 0,
					text: "待维护"
				},{
					value: 1,
					text: "进行中"
				},{
					value: 2,
					text: "待审核"
				},{
					value: 3,
					text: "已审核"
				}],
				sections:[],
				screenData:[],
				maintainStatus:0,
				indexS:0,
				indexProvince:0,
				indexArea:0,
				indexCity:0
		  };
		},
		computed: {
			startDate() {
					return this.getDate('start');
			},
			endDate() {
					return this.getDate('end');
			}
    },
		mounted() {
			this.getMaintainLists()
			this.getProvince();
		},
		methods: {
			close() {
				this.$emit('closePopup', 'project');
			},
      searchProject() {
				this.getMaintainLists()
      },
			gotoStatistics() {
				uni.showToast({
					title: '功能开发中...',
					icon: 'none'
				})
			},
			getMaintainLists() {
				getMaintainList({...this.page,...this.params}).then((res)=> {
					if(res.code == 20000){
						this.total = res.data.total
						this.totalPage = res.data.pages
						let obj = {};
						let maintainArr = []
						if(this.params.keyword || this.page.status==0 || this.page.status || this.page.district || this.page.planCompleteTime){
							this.maintainDatas = res.data.records;
						}else{
							maintainArr = this.maintainDatas.concat(res.data.records);
							this.maintainDatas = maintainArr.reduce(function(item, next) {
								obj[next.maintainTaskId] ? '' : obj[next.maintainTaskId] = true && item.push(next);
								return item;
							}, []);
						}
					}else{
						uni.showToast({
							title: '暂无数据...',
							icon: 'none'
						})
					}
				})
			},
      goToSubProjectInfo(data) {
				console.log(data);
      },
			// 重置表单
			reset(){
				this.clearProvince()
				this.clearArea()
				this.clearCity()
				this.status =  "状态";
				this.planCompleteTime = "维护时间";
				this.page.district = null;
				this.page.status = null;
				this.page.planCompleteTime = null;
				this.getMaintainLists()
			},
			getDistrict(code){//获取行政区接口
				this.resultList = [];
				getDistrict({code:code}).then( res => {
					if(res.code == "20000"){
						res.data.forEach(item => {
							this.resultList.push(Object.assign({},{text:item.name},{value:item.code}))
						})
					}
				})
			},
			clear(n){
				switch(n){
					case 0: this.clearProvince();
							this.getMaintainLists();break;
					case 1: this.clearCity();
							this.getMaintainLists();break;
					case 2: this.clearArea();
				    		this.getMaintainLists();break;
					case 3: this.page.status = '';
				            this.status = '状态';
				    		this.getMaintainLists();break;
					case 4: this.page.planCompleteTime = '';
					        this.planCompleteTime = '维护时间';
							this.getMaintainLists();break;
				}
			},
			//清除省选中
			clearProvince(){
				this.cityList = [];
				this.areaList = [];
				this.provinceName = '';
				this.cityName = '';
				this.areaName = '';
				this.page.district = '';
			},
			//清除市选中
			clearCity(){
				this.areaList = [];
				this.cityName = '';
				this.areaName = '';
				this.page.district = this.provinceCode;
			},
			//清除区县选中
			clearArea(){
				this.areaName = '';
				this.page.district = this.cityCode;
			},
			//获取省份数据
			getProvince(){
				this.getDistrict();
				let result = this.resultList;
				this.provinceList = result;
			},
			//选中省份，加载市数据，加载项目数据
			provinceChange(e){
				this.clearProvince();
				this.indexProvince = e.target.value;
				this.provinceName = this.provinceList[this.indexProvince].text;
				this.page.district = this.provinceList[this.indexProvince].value;
				this.page.pageNo = 1;
				this.getMaintainLists();
				this.getDistrict(this.page.district);
				let result = this.resultList;
				this.cityList = result;
				this.provinceCode = this.page.district;
				
			},
			//选中市，加载区县数据，加载项目数据
			cityChange(e){
				this.clearCity();
				this.indexCity = e.target.value;
				this.cityName = this.cityList[this.indexCity].text;
				this.page.district = this.cityList[this.indexCity].value;
				this.page.pageNo = 1;
				this.getMaintainLists();
				this.getDistrict(this.page.district);
				let result = this.resultList;
				this.areaList = result;
				this.cityCode = this.page.district;
			},
			//选中区县，加载项目数据
			areaChange(e){
				this.clearArea();
				this.indexArea = e.target.value;
				this.areaName = this.areaList[this.indexArea].text;
				this.page.district = this.areaList[this.indexArea].value;
				this.page.pageNo = 1;
				this.getMaintainLists();
				
			},
			//状态数据改变
			periodChange(e){
				this.maintainStatus = e.target.value;
				this.status = this.statusLabel[this.maintainStatus].text;
				this.page.status = this.statusLabel[this.maintainStatus].value;
				this.getMaintainLists();
			},
			// 时间改变
			bindDateChange(e){
				this.planCompleteTime = e.target.value
				this.page.planCompleteTime = e.target.value
				this.getMaintainLists();
			},
      gotoInfo(id) {
				uni.navigateTo({
					url: `/pages/maintain/maintain?maintainTaskId=${id}`
				})
      },
      gotoPoint(projectId) {
				projectInfo(projectId).then(res=>{
					if(res.code === "20000"){
						this.$root.$viewer.goView({
							longitude: Number(res.data.longitude),
							latitude: Number(res.data.latitude),
							height: 5000
						});
						this.$emit('closePopup', 'search');
					}else{
						uni.showToast({
							title: '暂未获取位置信息',
							icon: 'none'
						})
					}
				})
      },
			loadMoreMaintain() {
				if(this.page.pageNo < this.totalPage){
					this.page.pageNo++;
					this.getMaintainLists()
				}else{
					uni.showToast({
						title: '暂无更多数据',
						icon: 'none'
					})
					this.page.pageNo = 0;
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
						year = year - 60;
				} else if (type === 'end') {
						year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="less" scoped>
.my-popup{
  position: relative;
  height: 760rpx;
  background: rgba(5, 38, 102, .9);
  box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.8);
  border-radius: 10px 10px 0px 0px;
  .maintain_search{
    display: flex;
    height: 70rpx;
    padding: 30rpx 40rpx;
    .maintain-inp{
			flex: 1;
      height: 100%;
      padding-left: 10rpx;
      color: #fff;
      box-shadow: 0 -2rpx 20rpx 0 rgba(0, 146, 255, 0.8) inset;
      font-size: 28rpx;
      text-indent: 20rpx;
      .uni-input-input, .uni-input-placeholder{
        font-size: 28rpx;
        color: #fff;
      }
    }
    .maintain-btn{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100rpx;
      height: 100%;
      border-left: none;
      box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.8) inset;
      i{
        color: rgb(14, 255, 255);
        font-size: 32rpx;
      }
    }
  }
	.maintain_screen{
		display: flex;
		flex-direction: column;
		padding: 0 40rpx 15rpx;
		color: #fff;
		box-sizing: border-box;
		>.header-top,.header-bottom{
			display: flex;
			justify-content: space-between;
			>.uni-data-tree{
				height: 30px;
				flex: 1;
			}
			>.center-tree{margin-right:2px;}
			>.uni-data-tree /deep/ .uni-data-tree-input ,.uni-data-tree /deep/ .input-value-border{
					height: 100%;
				}
			margin-top: 10px;
			>.select{
					box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.8) inset;
					border-radius: 5px;
					padding: 5px;
					display: flex;
					align-items: center;
					width: 120px;
					color: #fff;
					position: relative;
					height: 30px;
					box-sizing: border-box;
					.popup-close{
						position: absolute;
						right: 12rpx;
						top: 12rpx;
					}
					.uni-input-input, .uni-input-placeholder{
						font-size: 28rpx;
						color: #fff;
					}
			}
		}
			// justify-content: center;
			// align-items: center;
			// border-bottom: 1px solid #FFF;
		>.search-inp{
			flex: 1;
			height: 100%;
			padding-left: 10rpx;
			color: #fff;
			font-size: 28rpx;
			border: 1px solid #00FFFF;
		}
		>.search-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100%;
			border: 1px solid #00FFFF;
			border-left: none;
			i{
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
  .buildList{
    height: calc(800rpx - 210rpx);
		width: 96%;
		margin: 0 auto;
		background: transparent;
    /deep/ .uni-scroll-view::-webkit-scrollbar{
      width: 0px;
    }
		.project-total{
			padding: 14rpx;
			text-align: center;
			color: #aaa;
		}
		.maintain-card{
			width: 93%;
			margin: 0 auto 30rpx;
			color: #fff;
			background: transparent;
      box-shadow: 0px -1px 10px 0px #0092FF inset;
			>.maintain-card__head{
				display: flex;
				height: 64rpx;
				line-height: 64rpx;
				color: #00FFFF;
        border-bottom: 2rpx solid rgba(0, 146, 255, 0.5);
				background: transparent;
				>.title{
					position: relative;
					flex: 1;
					padding: 0 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					>.uni-icons{
						position: absolute;
						right: 0;
						/deep/ span{
							font-size: 28rpx;
						}
					}
				}
				>.state{
					width: 140rpx;
					text-align: center;
				}
			}
			>.maintain-card__body{
				padding: 10rpx 20rpx 0;
        .maintain_label{
					margin-bottom: 10rpx;
				}
				>view{
					display: flex;
					>text{
						display: block;
						width: 50%;
					}
				}
			}
			>.maintain-card__foot{
				display: flex;
        width: 60%;
        margin: 40rpx auto 0;
				height: 100rpx;
				line-height: 100rpx;
        justify-content: space-between;
				.maintain_info_btn{
					position: relative;
					width: 160rpx;
          height: 64rpx;
          border-top: 1px solid #00FFFF;
          border-bottom: 1px solid #00FFFF;
          line-height: 64rpx;
					text-align: center;
					color: #fff;
          background: #115D9F;
				}
				.maintain_info_btn::before{
					content: "";
					display: inline-block;
					position: absolute;
					width: 0;
					height: 0;
					top: 0;
					left: -15rpx;
					border-right: 17rpx solid #115D9F;
					border-top: 33rpx solid transparent;
					border-bottom: 33rpx solid transparent;
					z-index: 11;
				}
				.maintain_info_btn::after{
					content: "";
					display: inline-block;
					position: absolute;
					width: 0;
					height: 0;
					top: 0;
					right: -15rpx;
					border-left: 17rpx solid #115D9F;
					border-top: 33rpx solid transparent;
					border-bottom: 33rpx solid transparent;
					z-index: 11;
				}
				.maintain_btn_bg{
					position:absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
				.maintain_btn_bg::before{
					content: "";
					display: inline-block;
					position: absolute;
					width: 0;
					height: 0;
					top: -2rpx;
					left: -18rpx;
					border-right: 18rpx solid #00FFFF;
					border-top: 35rpx solid transparent;
					border-bottom: 35rpx solid transparent;
				}
				.maintain_btn_bg::after{
					content: "";
					display: inline-block;
					position: absolute;
					width: 0;
					height: 0;
					top: -2rpx;
					right: -18rpx;
					border-left: 18rpx solid #00FFFF;
					border-top: 35rpx solid transparent;
					border-bottom: 35rpx solid transparent;
				}
			}
		}
		.load_more{
			color: #fff;
			width: 93%;
			margin: 0 auto;
			text-align: center;
			background: #115D9FF2;
			border: 1px solid #00FFFF;
		}
	}
}
</style>
